<template>
    <div
        id="lab-swipe"
        ref="labRef"
        class="relative flex flex-nowrap flex-row w-[var(--width)] h-[150px] overflow-hidden"
    >
        <!-- imgs -->
        <div
            id="imgs"
            class="flex flex-nowrap flex-row ease-linear transform translate-x-[var(--pos)] duration-[var(--time)]"
            @touchstart="touch.touchStart($event)"
            @touchmove="touch.touchMove($event)"
            @touchend="touch.touched($event)"
        >
            <div
                v-for="(v,k) in imgs"
                :key="k"
                class="w-[200px] h-[200px] flex justify-center times-center odd:bg-dark-200"
            >{{ v }}</div>
        </div>
        <!-- 选择控制区 -->
        <div
            id="radios"
            class="w-[100px] h-[20px] absolute mr-auto ml-auto text-center bottom-4 right-0"
        >
            <!-- name="swipe" -->
            <xy-radio
                v-for="(v,k) in imgs"
                name="swiper"
                @click="Jump.toPos(k)"
                :value="k"
                :checked="k === now"
            ></xy-radio>
        </div>

        <div id="buttons" class="text-center absolute z-10 left-0 right-0 top-4">
            <button @click="Jump.pre()">上一页</button>
            <button @click="Jump.next()">下一页</button>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from "vue";
// 这里定义一个数组以确定imgs
const imgs = ref<Array<string>>(["w", "t", "f"])
imgs.value.push()
const labRef = ref<HTMLElement>();
let sum = imgs.value.length;
const transition = (pos: number) => {
    let width = getComputedStyle(labRef.value as Element).getPropertyValue("--width");
    let width_num = parseInt(width.split("px")[0]);
    labRef.value?.style.setProperty(`--pos`, -1 * pos * width_num + "px");
};

const now = ref(0)
// 跳转控制器
const Jump = {
    toPos: (pos: number) => {
        // 关闭动画
        autoDisplay()
        transition(pos)
        now.value = pos
    },
    next: () => {
        // 关闭动画
        autoDisplay()
        now.value++
        now.value = now.value === sum ? 0 : now.value
        transition(now.value)
    },
    pre: () => {
        // 关闭动画
        autoDisplay()
        now.value--
        now.value = now.value === -1 ? sum - 1 : now.value
        transition(now.value)
    }
}
// 触摸控制器
const touch = {
    startTime: 0,
    lastPos: 0,
    startX: 0,
    startY: 0,
    touchStart: (e: any) => {
        //取消自动播放
        clearInterval(timer);
        timer = -1
        touch.startTime = new Date().getTime();
        if (e.touches.length === 1) {
            touch.startX = e.touches[0].clientX // 记录开始位置
            touch.startY = e.touches[0].clientY // 记录开始位置
        }
        let pos = getComputedStyle(labRef.value as Element).getPropertyValue("--pos");
        let pos_num = parseInt(pos.split("px")[0]);
        touch.lastPos = pos_num;
    },
    // 根据距离移动位置
    move: (dis: number) => {
        labRef.value?.style.setProperty(`--pos`, touch.lastPos + dis * -1 + "px");
    },
    moveX: 0,
    touchMove: (e: any) => {
        //记录移动位置
        touch.moveX = e.touches[0].clientX
        let disX = touch.startX - touch.moveX
        // 冻结动画效果
        labRef.value?.style.setProperty(`--time`, "0s");
        labRef.value?.style.setProperty(`--pos`, touch.lastPos + disX * -1 + "px");
        // 得到pos值
        // touch.move(disX)
    },
    // 最后判定位置
    touched: (e: Event) => {
        // 释放动画效果
        labRef.value?.style.setProperty(`--time`, "0.1s");
        let width = getComputedStyle(labRef.value as Element).getPropertyValue("--width");
        let width_num = parseInt(width.split("px")[0]);
        let dis = touch.moveX - touch.startX;
        if (dis > width_num / 3 && now.value > 0) {
            Jump.pre()
        }
        else if (dis < -width_num / 3 && now.value < imgs.value.length - 1) {
            Jump.next()
        } else {
            labRef.value?.style.setProperty(`--pos`, touch.lastPos + "px");
        }
        //开始动画
        autoDisplay()
    }
}

onMounted(() => {
    // 初始化位置
    transition(0);
    // 完成动画后.....完全是为了复位，真的令人头大...
    (labRef.value as Element).addEventListener("transitionend", () => {
        // 复位 首尾的特殊情况
        labRef.value?.style.setProperty(`--time`, `1s`);

    });
    // 设置自动播放呢~
    autoDisplay()
});
let timer = -1;
const autoDisplay = () => {
    if (timer != -1) {
        clearInterval(timer)
    }
    timer = setInterval(() => {
        Jump.next()
    }, 4000) as unknown as number
}
</script>
<style>
#lab-swipe {
    --width: 200px;
    --pos: 0;
    --time: 1s;
}
</style>